
import React, { useEffect, useState } from 'react';
import Footer from '../Home/components/Footer';
import './index.css';
import { Card, Divider, Tag, ConfigProvider, InputNumber,Button,Carousel  } from 'antd';
import { NavLink,} from 'react-router-dom';
import { fetchGoodsData } from '../../apis/goods';
import Header from '../Home/components/Header';
import {Outlet  } from 'react-router'
import { useSearchParams } from 'react-router-dom'

// const { Meta } = Card;

const ProductDetailPage = () => {

    // 定义颜色
    function computedClassName({isActive}) {
      return isActive ? 'active':'none'
    }
  const [goodsData, setGoodsData] = useState(null);
  const [search] = useSearchParams();
  const id = parseInt(search.get('id'));


  const fetchData = async () => {
    try {
      const data = await fetchGoodsData();
      const selectedData = await data.find(item => item.id === id);
      if (selectedData) {
        setGoodsData(selectedData);
        localStorage.setItem('goodsData', JSON.stringify(selectedData));
      } else {
        console.log("未找到匹配的商品数据");
        // 可在此进行适当的错误处理或跳转至错误页面
      }
    } catch (error) {
      console.error("获取商品数据时出错:", error);
      // 可在此进行适当的错误处理或跳转至错误页面
    }
  };
  
  useEffect(() => {
    const storedData = localStorage.getItem('goodsData');
    if (storedData) {
      setGoodsData(JSON.parse(storedData));
    } else {
      fetchData();
    }
  
    // 返回一个清理函数
    return () => {
      localStorage.removeItem('goodsData'); // 清除缓存
    };
  }, []);








  console.log(goodsData);


  if (!goodsData) {
    return <div>Loading...</div>; // 显示加载提示或错误信息
  }

  return (
  
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#30B30E',
          borderRadius: 2,
        },
      }}
    >
      <Header />
      <div className='main'>
        <div className='img_box'>
         <Carousel className='banner' autoplay>
              {/* <div>
                <img src={require('../../static/image/img/1.jpg')} alt="" />
              </div> */}
           {goodsData.images.map((image,index)=>(
            <div key={index}>
              <img src={require(`../../static/image/`+image)} alt="" />
            </div>
           ))}
         </Carousel>

        </div>

        <div className='card'>
          <Card className='card_item'>
            <h2>{goodsData.name}</h2>
            <p>{goodsData.description}</p>

            <div>
              {/* <h3>{goodsData.name}</h3> */}
              <h6>{goodsData.detail}</h6>
              <div>
                <Tag color="green">新品上市</Tag>
                <Tag color="blue">免邮费</Tag>
              </div>
            </div>
            <Divider />
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div>
                <h3 >价格</h3>
                <p className='price'>¥ {goodsData.price}</p>
              </div>
              <div>
                <h3>库存</h3>
                <p>{goodsData.stock}</p>
              </div>
            </div>
            <Divider />

            <div className='content'>
              <InputNumber addonBefore="+" addonAfter="件" defaultValue={1} className='content_item' />
              <Button type="primary">
                立即购买
              </Button>
              <Button type="primary">
                添加到购物车
              </Button>
            </div>
          </Card>
        </div>
      </div>

      <div className='title'>
        <ul>
          <li><NavLink className={computedClassName} activeClassName="acc" to="" state={goodsData}>宝贝详情</NavLink></li>
          <li><NavLink className={computedClassName} activeClassName="acc" to="evaluate">宝贝评价</NavLink></li>
          <li><NavLink className={computedClassName} activeClassName="acc" to="question">常见问题</NavLink></li>
        </ul>
        <hr />
      </div>

      {/* 路由出口 */}
      <div ><Outlet/></div>

      {/* 底部样式 */}
      <Footer />
    </ConfigProvider>
  );
};

export default ProductDetailPage;
